
<template>
  <!-- 所有唇部页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="bg">
        <img
          src="https://www.maccosmetics.com.cn/media/export/cms/new_mpp_headers/MPP_lipstick_1920x480.jpg"
          alt=""
        />
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" class="bread">
          <el-breadcrumb-item v-for="item in $route.meta.nav" :key="item.id">{{
            item
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h2>唇膏-LIPSTICKS</h2>
      </div>
    </div>
    <div class="container">
      <div class="filtrate">
        <p>观看：商品</p>
        <div>
          <span>筛选：</span>
          <div>确认</div>
        </div>
        <!-- <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select> -->
      </div>
      <!-- 商品列表 -->
      <product></product>
    </div>
  </div>
</template>

<script>
import product from "@/components/product.vue";
export default {
  components: {
    product,
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  position: relative;
  .bg {
    height: 300px;
    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    .bread {
      position: absolute;
      top: 0;
      left: 15%;
      ::v-deep .el-breadcrumb__inner {
        color: #fff;
      }
      ::v-deep .el-breadcrumb__separator {
        color: #fff;
      }
    }
    h2 {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 7rem;
      position: absolute;
      left: 0;
      top: 80px;
    }
  }
}
.container {
  margin: 0 auto;
  width: 80%;
  .filtrate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 100px 0 50px;
    div {
      display: flex;
    }
  }
}
</style>